<template>
    <div>
        <a-space>
            <div class="item" v-for="(url, index) in fileList">
                <a-image :width="100" :height="100" class="item-img" :src="url" alt=""></a-image>
                <CloseOutlined @click.stop="remove(index)" class="close-btn" v-if="!onlyLook" />
            </div>
        </a-space>

        <div class="item" @click="selectFile" v-if="!onlyLook">

            <div class="item-img">
                <a-spin :spinning="spinning">
                    <plus-outlined />
                    <div style="margin-top: 8px">上传图片</div>
                </a-spin>
            </div>


        </div>


        <input ref="fileInput" @change="fileInputChange" type="file" accept="image/*" multiple style="display: none;" />


    </div>
</template>
<script lang="ts" setup>
import { PlusOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { ref, onMounted, watch, onActivated } from 'vue';
import { uploadFile } from '@/api/supportApi';
import { message } from 'ant-design-vue';
import { Form } from "ant-design-vue";
const formItemContext = Form.useInjectFormItemContext();
const props = defineProps({
    maxCount: {
        type: Number,
        default: 1
    },
    onlyLook: {
        type: Boolean,
        default: false
    }
})

const model = defineModel({ default: '' })
const list = defineModel('list')

const spinning = ref(false)

watch(model, (newVal, oldVal) => {
    if (newVal) {
        fileList.value = newVal.split(',')
    } else {
        fileList.value = []
    }
})


watch(list, (newVal, oldVal) => {

    if (newVal) {
        fileList.value = JSON.parse(JSON.stringify(newVal))
    } else {
        fileList.value = []
    }
})

const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');

const fileList = ref<string[]>([]);

const fileInput = ref()
const selectFile = () => {
    if(spinning.value){
        return
    }

    if (fileList.value.length >= props.maxCount) {
        message.error(`最多上传${props.maxCount}张`)
        return
    }
    fileInput.value.click()
}
const fileInputChange = async (e: any) => {

    let files = e.target.files
    console.log(files)
    for (let file of files) {
        await customRequest(file)
    }
    e.target.value = ''
    model.value = fileList.value.join()
    list.value = fileList.value
    formItemContext.onFieldChange()
}

const customRequest = async (file: File) => {

    const formData = new FormData();
    formData.append('file', file);
    
    function onProgress(event: any) {

    }
    spinning.value = true
    let res = await uploadFile(formData, onProgress)
    spinning.value = false
    fileList.value.push(res)


}

const remove = (index: number) => {

    fileList.value.splice(index, 1)

    model.value = fileList.value.join()
    list.value = fileList.value
    formItemContext.onFieldChange()
}

onMounted(() => {
    if (list.value) {
        fileList.value = JSON.parse(JSON.stringify(list.value))
    }

})


</script>
<style scoped>
.item {
    display: inline-block;

    width: 102px;
    height: 102px;
    margin-inline-end: 8px;

    text-align: center;
    vertical-align: top;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s;

    position: relative;
}

.item::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.item-img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.close-btn {
    position: absolute;
    color: red;
    right: 0;
    top: 0;
    cursor: pointer;
    font-size: 20px;
}
</style>